<script lang="ts" setup>
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import JsPDF from 'jspdf'
import moment from 'moment'
import { ref } from 'vue'

import { useRouter } from 'vue-router'
// 创建 router 实例
definePageMeta({
  title: '转PDF', // 自定义元信息
  requiresAuth: false, // 其他自定义元信息
  layout: 'default', // 指定布局
  keepalive: true,
}) // 导入 useRouter

const router = useRouter()

const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.warn(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

function img2pdf() {
  if (fileList.value.length === 0)
    return
  const pdf = new JsPDF()
  const promises = fileList.value.map((file, index) => {
    return new Promise((resolve) => {
      const img = new Image()
      img.src = file.url!
      img.onload = () => {
        pdf.addImage(img, 'JPEG', 10, 10, 190, 0) // 190 是图片宽度，0 是高度自动调整
        if (index < fileList.value.length - 1) {
          pdf.addPage() // 添加新页面
        }
        resolve(1)
      }
    })
  })

  Promise.all(promises).then(() => {
    const pdfBlob = pdf.output('blob') // 生成 Blob 对象
    const pdfUrl = URL.createObjectURL(pdfBlob) // 创建可用的 URL
    // store.set(pdfBlob);
    // router.push({
    //   path: "/viewpdfblob",
    //   query: { title: "转换结果", url: pdfUrl }
    // });
    // const pdfUrl = URL.createObjectURL(pdfBlob); // 创建可用的 URL
    // // window.open(pdfUrl); // 在新窗口中打开 PDF
    const now = moment()
    const formattedDate = now.format('HH:mm:ss')
    router.push({
      path: '/view',
      query: { title: `转换结果${formattedDate}`, url: pdfUrl },
    }) // 跳转到 view.vue，并传递 pdfUrl
  })
}
</script>

<template>
  <div class="cards">
    <div class="cards-content">
      <el-upload
        v-model:file-list="fileList"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :multiple="true"
        :auto-upload="false"
        :drag="true"
        accept=".jpg,.jpeg,.png,.gif"
      >
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
    </div>
    <div class="cards-bottom">
      <el-button type="primary" @click="img2pdf">
        将选择的图片转换为PDF文件
      </el-button>
    </div>
    <el-dialog v-model="dialogVisible">
      <img style="width: 95%" :src="dialogImageUrl" alt="Preview Image">
    </el-dialog>
  </div>
</template>

<style scoped>
.cards {
  position: relative;
  display: block;
  margin: 20px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
}

.cards-content {
  padding: 20px;
  overflow: auto;
  height: calc(100vh - 300px);
  min-height: calc(100vh - 300px);
  max-height: calc(100vh - 300px);
}

.cards-bottom {
  padding-top: 10px;
  height: 50px;
  border-top: 1px solid var(--el-border-color);
}
</style>
